<template>
	<view class="news_wrapper">
		<!--banner-->
		<swiper class="banner__swiper_wrap" :autoplay='true' @change="onSwiperChange" :circular="true">
			<swiper-item v-for="(item,index) in bannerListData" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 -->
		<!-- <view class="news_tip">公告</view>
		<swiper class="swiper_wrap" :autoplay='true' @change="onSwiperChange" :circular="true" :display-multiple-items=2 :previous-margin="20" :next-margin="20">
			<swiper-item v-for="(item,index) in newsListData" :key="index" class="swiper_item">
				<image :src="item"></image>
			</swiper-item>
		</swiper> -->
		<!--咨讯-->
		<view class="news_tip">资讯</view>
		<view class="news_item" v-for="(item,index) in newsList" :key="index" @click="goDetail(item.id)">
			<view class="news_title">{{item.title}}</view>
			<view class="news_info-wrap">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/hot.png"></image>
				<text class="news_update">{{item.update_time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [], // 资讯列表
				bannerListData: [
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/newsBanner1.png',
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/newsBanner2.png'
				],
				newsListData:[
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/headerBanner.png',
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/headerBanner.png',
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/headerBanner.png',
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/headerBanner.png',
					'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/news/headerBanner.png'
				]
			}
		},
		onShow() {
			this.getNewsList();
		},
		onPullDownRefresh() {
			this.getNewsList();
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/news/newsDetail?id=' + id
				})
			},
			//资讯列表
			getNewsList() {
				this.$api.getAnnouncementList({
					page: this.page,
					c_id: 9
				}, (res) => {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
					if (res.data.type == 'ok') {
						if (res.data.message.data.length > 0) {
							this.newsList = res.data.message.data;
						}
					}
				})
			},
			onSwiperChange(event){
				console.log(event)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_wrapper {
		height: #ffffff;
	}

	.banner__swiper_wrap {
		height:400upx;
		margin-bottom: 20upx;
		border-radius: 10upx;
		overflow: hidden;
		image{
			width:100%;
			height: 100%;
		}
	}

	.swiper_wrap{
		height:180upx;
		margin:20upx 0;
		.swiper_item{
			border-radius: 10upx!important;
			overflow: hidden;
			image{
				margin:0 10upx;
				width:100%;
				height: 100%;
				border-radius: 10upx!important;
			}
		}
	}

	.news_tip {
		margin-left:4%;
		font-size: 18px;
	}

	.news_item {
		width: 92%;
		margin: 20upx auto 20upx auto;
		padding: 10px 20upx;
		box-sizing: border-box;
		background-color:#FFFFFF;
		box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.08);
		border-radius:10upx;
		.news_title {}

		.news_info-wrap {
			display: flex;
			align-items: center;
			margin-top: 8px;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 10px;
			}

			text {
				color: #BCBCBC;
			}
		}
	}

	.news_item:first-child{
		margin-top:0;
	}
</style>
